import { CockpitChartBaseProps, legendCommonConfig } from "../helps";
import React from "react";

export interface KxEnvDetectionPieChartProps extends CockpitChartBaseProps {
  img?: any;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";
import { useIsMobile } from "../hooks/useIsMobile";

export const getKxEnvDetectionPieChartOption = ({
  dataSource = [],
  img,
  isMobile,
}: KxEnvDetectionPieChartProps): EChartsOption => {
  const nameMap = dataSource.reduce<Record<string, number>>((memo, cur) => {
    if (cur.name) {
      memo[cur.name] = cur.amount || 0;
    }

    return memo;
  }, {});

  const color = ["#2BE872", "#2CFFFF", "#7E00F3", "#FD850B"];
  const total = dataSource.reduce((memo, cur) => {
    return memo + (cur.amount || 0);
  }, 0);
  const data = dataSource.reduce<any[]>((memo, cur, currentIndex) => {
    memo.push(
      {
        value: cur.amount || 0,
        name: cur.name || "",
        itemStyle: {
          normal: {
            borderWidth: 5,
            shadowBlur: 20,
            borderColor: color[currentIndex],
            shadowColor: color[currentIndex],
          },
        },
      },
      {
        value: 2,
        name: "",
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        },
      }
    );
    return memo;
  }, []);

  return {
    grid: {
      left: 0,
    },
    color: color,
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 103,
            height: 103,
          },
          left: isMobile ? "center" : "15.5%",
          top: "center",
        },
      ],
    },

    tooltip: {
      show: false,
    },
    legend: {
      ...(isMobile
        ? {
            ...legendCommonConfig,

            top: undefined,
            bottom: "15%",
            left: "center",
          }
        : {
            right: "0%",
            top: "15%",
            left: "53%",
            bottom: "80%",
          }),
      data: dataSource.map((d) => d.name || ""),
      icon: "circle",
      formatter: (params) => {
        const value = nameMap[params];
        if (total === 0) {
          return `{a|${params} }{b|0%}{c|${value}}`;
        }
        const name = params;
        return `{a|${name} }{b|${value}}{c|${((value * 100) / total).toFixed(
          2
        )}%}`;
      },
      textStyle: {
        rich: {
          a: {
            color: "#ffffff",
            width: 69,
            fontSize: 14,
            fontWeight: "bold",
            align: "left",
          },
          b: {
            color: "#ffffff",
            fontSize: 14,
            width: 56,
            fontWeight: "bold",
          },
          c: {
            color: "#ffffff",
            fontSize: 14,
            fontWeight: "bold",
          },
        },
      },
      // selectorPosition: 'start',
      // align: 'left',
      itemHeight: 8,
      itemWidth: 8,
      itemGap: 25,
      itemStyle: {
        color: "",
        borderColor: "inherit",
        borderWidth: 2,
        borderType: "solid",
      },
    },
    toolbox: {
      show: false,
    },
    series: [
      {
        name: "",
        type: "pie",
        clockwise: false,
        radius: [65, 69],
        // width:80,
        // radius: ['70%', '75%'],
        center: isMobile ? ["50%", "30%"] : ["27%", "50%"],
        label: {
          show: false,
        },
        itemStyle: {},
        data: data,
      },
    ],
  };
};

const KxEnvDetectionPieChart = ({
  reactEChartsProps,
  dataSource,
}: KxEnvDetectionPieChartProps) => {
  const isMobile = useIsMobile();

  return (
    <ReactECharts
      {...reactEChartsProps}
      key={
        isMobile ? "mobile-KxEnvDetectionPieChart" : "pc-KxEnvDetectionPieChart"
      }
      style={{
        width: "100%",
        height: isMobile ? "400px" : "210px",
      }}
      option={getKxEnvDetectionPieChartOption({
        dataSource,
        isMobile,
      })}
    />
  );
};

export default KxEnvDetectionPieChart;
